<template>
  <div class="comment">
    <!-- 表单区域 -->
    <van-field
      v-model="content"
      rows="2"
      autosize
      label="发表留言"
      type="textarea"
      maxlength="50"
      placeholder="请输入评论"
      show-word-limit
    />
    <!-- 提交按钮 -->
    <van-button type="primary" block @click="addComments">提交pinlun</van-button>
    <!-- 列表渲染 -->
    <van-card :desc="comment.content" v-for="comment in comments" :key="comment.id">
      <template #price> {{comment.add_time}} </template>
      <template #title>
        <van-rate class="myate" v-model="comment.rate" readonly />
      </template>
      <template #thumb>
        <van-icon
          class="friend"
          name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
        />
        <span class="">{{comment.user_name}}</span>
      </template>
    </van-card>
    <!-- 加载更多 -->
     <van-button  class="addmore" type="primary" block @click="getMore">{{moreText}}</van-button>

  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    content: '',
    comments:[],
    pageNo:0,
    pageSize:300,
    hasMore:false

  }),
  created() {
    this.getComments()
  },
  methods: {
    async getComments() {
      if(this.hasMore){
        return
      }
      ++this.pageNo
      console.log(this.id);
      const res = await this.$http.getComments({
        id:this.id,
        pageNo:this.pageNo,
        pageSize:this.pageSize
      });
      console.log(res);
      this.comments = this.comments.concat(res.data.message)
      this.hasMore=this.pageNo*this.pageSize>=res.data.count
    },
    getMore(){
      this.getComments()
    },
    async addComments() {
    await this.$http.addComments({
        id:this.id,
        content:this.content
      });
      this.comments.unshift({
        id:new Date().getTime(),
        content:this.content,
        rate:4,
        add_time:new Date().getTime()
      })
    }

  },
  computed:{
    moreText(){
      return this.hasMore?'没有更多了':'加载更多'
    }
  }
}
</script>
<style lang="scss" >
.comment {
  // padding: 10px 15px;
  margin-top: 10px;
  .van-cell {
    border: 1px solid #ddd;
    margin-bottom: 10px;
  }
  .van-field__label {
    width: 100px;
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .van-card__content {
    min-height: 55px;
  }
  .van-card__thumb {
    height: 55px;
  }
  .friend {
    font-size: 45px;
    display: block;
  }
  .myrate {
    font-size: 10px;
  }
  .addmore{
    margin-bottom: 50px;
  }
}
</style>